<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="../css/shopping_car.css">
</head>

<body>
    <div class="shopping-head">
        <div class="container">
            <ul class="logo">
                <li class="img"></li>
                <li class="title">我的购物车</li>
                <li class="caption">温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算
                </li>
            </ul>
            <div class="login-status">
                <a href="../html/login_register.html">立即登录</a>
            </div>
        </div>
    </div>

    <div class="goods-content">
        <div class="goods-hide">
            <div class="goods-empty">
                <div class="bg"></div>
                <div class="caption">
                    <h2>您的购物车还是空的！</h2>
                    <button class="main-btn">马上去购物</button>
                </div>
            </div>
        </div>
        <div class="goods-show">
            <ul class="list-goods">
                <li>
                    <ul class="goods-detail">
                        <li class="all-changed"><input type="checkbox" checked="true" name="" id=""
                                class="all-changed change all-changed-is">&nbsp;&nbsp;全选</li>
                        <li class="goods-name">商品名称</li>
                        <li class="unit-price">单价</li>
                        <li class="number">数量</li>
                        <li class="subtotal">小计</li>
                        <li class="operation">操作</li>
                    </ul>
                </li>

            </ul>
            <div class="settlement">
                <div class="amount">
                    <a href="./main.html">继续购物</a>
                    <span class="hint">共选中了<span>0</span>件商品</span>
                </div>
                <div class="btn">
                    <span class="hint">合计:<span>0</span>元</span>
                    <div class="submit">去结算</div>
                </div>
            </div>
        </div>
    </div>

    <footer>
        <div class="footerServer">
            <ul>
                <li>
                    <span class="bi bi-wrench"></span>
                    <span>预约维修服务</span>
                </li>
                <li>
                    <span class="bi bi-arrow-counterclockwise"></span>
                    <span>7天无理由退货</span>
                </li>
                <li>
                    <span class="bi bi-bootstrap-reboot"></span>
                    <span>15天免费换货</span>
                </li>
                <li>
                    <span class="bi bi-gift"></span>
                    <span>满69包邮</span>
                </li>
                <li>
                    <span class="bi bi-geo-alt"></span>
                    <span>520余家售后网点</span>
                </li>
            </ul>
        </div>
        <div class="sortServer">
            <div class="sortServerLeft">
                <dl>
                    <dt>帮助中心</dt>
                    <dd>账户管理</dd>
                    <dd>购物指南</dd>
                    <dd>订单操作</dd>
                </dl>
                <dl>
                    <dt>服务支持</dt>
                    <dd>售后政策</dd>
                    <dd>自助服务</dd>
                    <dd>相关下载</dd>
                </dl>
                <dl>
                    <dt>线下门店</dt>
                    <dd>小米之家</dd>
                    <dd>服务网点</dd>
                    <dd>授权体验店</dd>
                </dl>
                <dl>
                    <dt>关于小米</dt>
                    <dd>了解小米</dd>
                    <dd>加入小米</dd>
                    <dd>投资者关系</dd>
                    <dd>企业社会责任</dd>
                    <dd>廉洁举报</dd>
                </dl>
                <dl>
                    <dt>关注我们</dt>
                    <dd>新浪微博</dd>
                    <dd>官方微信</dd>
                    <dd>联系我们</dd>
                    <dd>公益基金会</dd>
                </dl>
                <dl>
                    <dt>特色服务</dt>
                    <dd>F码通道</dd>
                    <dd>礼物码</dd>
                    <dd>防伪查询</dd>
                </dl>
            </div>
            <div class="sortServerRight">
                <p>400-100-5678</p>
                <p>8:00-18:00（仅收市话费）</p>
                <div class="service"><span class="bi bi-chat-left-dots-fill"></span><span>人工客服</span></div>
                <div>关注小米：
                    <a href="https://weibo.com/xiaomishangcheng" target="_blank" class="wb"></a>
                    <a href="javascript:void(0);" id="J_followWx" class="wx"></a>
                </div>
            </div>
        </div>
    </footer>
    <div class="company-information">
        <div class="ci-container">
            <div class="ci-logo">
                <div class="bg"></div>
            </div>
            <div class="ci-information">
                <p class="sites"><a rel="nofollow" href="//www.mi.com/index.html" target="_blank">小米商城</a> <span
                        class="sep">|</span> <a rel="nofollow" href="//www.miui.com/" target="_blank">MIUI</a> <span
                        class="sep">|</span> <a rel="nofollow" href="//home.mi.com/index.html" target="_blank">米家</a>
                    <span class="sep">|</span> <a rel="nofollow" href="http://www.miliao.com/" target="_blank">米聊</a>
                    <span class="sep">|</span> <a rel="nofollow" href="//www.duokan.com/" target="_blank">多看</a> <span
                        class="sep">|</span> <a rel="nofollow" href="//game.xiaomi.com/" target="_blank">游戏</a> <span
                        class="sep">|</span> <a rel="nofollow"
                        href="//b.mi.com/?client_id=180100031058&amp;masid=17409.0358" target="_blank">政企服务</a> <span
                        class="sep">|</span> <a rel="nofollow" href="//xiaomi.tmall.com/" target="_blank">小米天猫店</a>
                    <span class="sep">|</span> <a rel="nofollow" href="//privacy.mi.com/all/zh_CN/"
                        target="_blank">小米集团隐私政策</a> <span class="sep">|</span> <a rel="nofollow"
                        href="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/f516fe9e2c01.html" target="_blank">小米公司儿童信息保护规则</a>
                    <span class="sep">|</span> <a rel="nofollow"
                        href="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/ded8d0e4a77d.html" target="_blank">小米商城隐私政策</a>
                    <span class="sep">|</span> <a rel="nofollow" href="//www.mi.com/about/user-agreement/"
                        target="_blank">小米商城用户协议</a> <span class="sep">|</span> <a rel="nofollow"
                        href="//static.mi.com/feedback/" target="_blank">问题反馈</a> <span class="sep">|</span> <a
                        rel="nofollow" href="javascript:void(0);" class="J_siteGlobalRegion">Select Location</a>
                </p>
                <p class="sites"><a rel="nofollow" href="http://www.mi.com/beihu" target="_blank">北京互联网法院法律服务工作站</a>
                    <span class="sep">|</span> <a rel="nofollow" href="http://www.cca.org.cn/"
                        target="_blank">中国消费者协会</a> <span class="sep">|</span> <a rel="nofollow"
                        href="http://www.bj315.org/" target="_blank">北京市消费者协会</a>
                </p>
                <p class="others-sites">
                    ©
                    <a href="javascript:;" target="_blank" title="mi.com">mi.com</a> 京ICP证110507号
                    <a href="http://beian.miit.gov.cn/" target="_blank" rel="nofollow">京ICP备10046444号</a> <a
                        rel="nofollow"
                        href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802020134"
                        target="_blank">京公网安备11010802020134号</a> <a href="//www.mi.com/culture-license/"
                        target="_blank">京网文[2020]0276-042号</a> <br> <a href="//www.mi.com/medical/record/"
                        target="_blank">（京）网械平台备字（2018）第00005号</a> <a href="//www.mi.com/medical/qualification/"
                        target="_blank">互联网药品信息服务资格证 (京)-非经营性-2014-0090</a> <a href="//www.mi.com/business-license/"
                        target="_blank">营业执照</a> <a href="//www.mi.com/medical/list/" target="_blank">医疗器械质量公告</a> <br>
                    <a href="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e0c7d4cf3b7cd88de10196e30c92e020.png"
                        target="_blank">增值电信业务许可证</a>&nbsp;网络食品经营备案 京食药网食备202010048 &nbsp;
                    <a href="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c6859168166651511897f54fa1047fe3.png"
                        target="_blank">食品经营许可证</a> <br>
                    违法和不良信息举报电话：171-5104-4404&nbsp;<a href="https://www.mi.com/intellectual"
                        target="_blank">知识产权侵权投诉</a>&nbsp;本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
                </p>
                <div class="info-links"><a rel="nofollow"
                        href="https://privacy.truste.com/privacy-seal/validation?rid=4fc28a8c-6822-4980-9c4b-9fdc69b94eb8&amp;lang=zh-cn"
                        target="_blank"><img rel="nofollow" src="https://i1.mifile.cn/f/i/17/site/truste.png"
                            alt="TRUSTe Privacy Certification"></a> <a rel="nofollow"
                        href="https://search.szfw.org/cert/l/CX20120926001783002010" target="_blank"><img rel="nofollow"
                            src="https://s01.mifile.cn/i/v-logo-2.png" alt="诚信网站"></a> <a
                        id="_xinchacharenzheng_cert_vip_kexinweb" rel="nofollow"
                        href="https://xyt.xinchacha.com/pcinfo?sn=523009637759455232&amp;certType=6"
                        target="_blank"><img rel="nofollow" src="https://xyt.xinchacha.com/img/icon/icon3.png"
                            alt="可信网站"></a> <a rel="nofollow" href="https://www.mi.com/service/buy/commitment/"
                        target="_blank"><img rel="nofollow"
                            src="https://i8.mifile.cn/b2c-mimall-media/ba10428a4f9495ac310fd0b5e0cf8370.png"
                            alt="诚信经营 放心消费"></a><a rel="nofollow"
                        href="https://webcert.cnmstl.net/cert/grade?sn=3af21034e35011eab3ea00163e068ceb"
                        class="safe-auth J_safeAuth                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              "><img
                            rel="nofollow"
                            src="https://cnbj1.fds.api.xiaomi.com/b2c-misite-activity/f1ee261b96ae71e845efba398efeca02.png"
                            class="img1"><img rel="nofollow"
                            src="https://cnbj1.fds.api.xiaomi.com/b2c-misite-activity/e0bcab4f6fe52444d56e4d05997d521a.png"
                            class="img2"></a></div>
            </div>
        </div>
    </div>
</body>
<script src="../js/jquery-1.10.1.min.js"></script>
<script>
    let cookieStr = document.cookie;
    let reg = /(userName)/g;
    let cookieResult = cookieStr.split("; ");
    let userName;
    for (let i = 0; i < cookieResult.length; i++) {
        let key = cookieResult[i].split("=")[0];
        let value = cookieResult[i].split("=")[1];
        if (key == "userName") {
            userName = value;
        }
    }
    if (reg.test(cookieStr)) {
        $(".login-status").text(`欢迎你：${userName}`);
    }
    $.ajax({
        type: "GET",
        url: "../php/shopping_car.php",
        data: `userName=${userName}`,
        success: function (data) {
            //外部ajax查询购物车表的商品id和数量。 其实这里可以用连表查询的sql省去ajax嵌套
            data = JSON.parse(data);
            for (let i = 0; i < data.length; i++) {
                $.ajax({
                    type: "GET",
                    url: "../php/search_goods_detail.php",
                    data: `goodsId=${data[i]["goods_id"]}`,
                    success: function (msg) {
                        //通过商品id查询商品详情页获取数据
                        let number = data[i]["number"];
                        let goodsDetailData = JSON.parse(msg)
                        $(".goods-content").find(".goods-hide").css({ "display": "none" });
                        $(".goods-content").find(".goods-show").css({ "display": "block" });
                        let img = goodsDetailData[0]["imgs"].split(";");
                        let ele = `
                                <li class="pars" data-id="${goodsDetailData[0]["goods_id"]}">
                                    <ul class="goods-detail goods-detail-list">
                                        <li class="all-changed"><input type="checkbox" checked="true"
                                                class="all-changed change change-detail"></li>
                                        <li class="goods-name">
                                            <div>
                                                <img src="${img[0]}"
                                                    alt="">
                                            </div>
                                            <span>${goodsDetailData[0]["title"]}</span>
                                        </li>
                                        <li class="unit-price unit-price-detail"><span>${goodsDetailData[0]["pre_price"]}</span>元</li>
                                        <li class="number number-detail">
                                            <div>
                                                <input type="button" value="-" class="reduce">
                                                <input type="text" name="" value="${number}" class="goods-number">
                                                <input type="button" value="+" class="add">
                                            </div>
                                        </li>
                                        <li class="subtotal subtotal-detail"><span>${number * goodsDetailData[0]["pre_price"]}</span>元</li>
                                        <li class="operation operation-detail">
                                            <span>x</span>
                                        </li>
                                    </ul>
                                </li>
                        `;
                        $(".list-goods").append(ele);
                        setTimeout(() => {
                            if (i == data.length - 1) {
                                changedGoods();
                                //全选与取消全选
                                $(".all-changed-is").click(function () {
                                    let isChecked = $(this).prop("checked");
                                    if (isChecked) {
                                        $(".change-detail").prop("checked", true);
                                    } else {
                                        $(".change-detail").prop("checked", false);
                                    }
                                    changedGoods();
                                    settlement();
                                });
                                //单个商品勾选影响总额和全选
                                $(".change-detail").click(function () {
                                    if ($(".change-detail:checked").length == $(".change-detail").length) {
                                        $(".all-changed-is").prop("checked", true);
                                    } else {
                                        $(".all-changed-is").prop("checked", false);
                                    }
                                    settlement();
                                });
                                //判断勾选了多少商品
                                function changedGoods() {
                                    $(".settlement").find(".amount .hint span").text($(".change-detail:checked").size());
                                }
                                $(".change-detail").click(function () {
                                    changedGoods();
                                    settlement();
                                })
                                //删除商品
                                $(".operation-detail").click(function () {
                                    //更新数据库
                                    let goodsId = $(this).parents('.pars').attr("data-id");
                                    $.ajax({
                                        type: "GET",
                                        url: "../php/update_shopping_car.php",
                                        data: `status=delete&userName=${userName}&goodsId=${goodsId}`,
                                        success: function (msg) {
                                            console.log(JSON.parse(msg));
                                        }
                                    });
                                    $(this).parents("li").remove();
                                    changedGoods();
                                    settlement();
                                })
                                //商品数量增减
                                $(".number-detail").find(".reduce").click(function () {
                                    let presentNumber = parseInt($(this).siblings(".goods-number").val());
                                    if (presentNumber <= 1) {
                                        $(this).siblings(".goods-number").val("1");
                                    } else {
                                        presentNumber--;
                                        $(this).siblings(".goods-number").val(presentNumber);
                                    }
                                    subtotal($(this));
                                    //增减数量时，同步数据库
                                    let goodsId = $(this).parents('.pars').attr("data-id");
                                    $.ajax({
                                        type: "GET",
                                        url: "../php/update_shopping_car.php",
                                        data: `status=update&userName=${userName}&goodsId=${goodsId}&number=${presentNumber}`,
                                        success: function (msg) {
                                        }
                                    });
                                })
                                $(".number-detail").find(".add").click(function () {
                                    let presentNumber = parseInt($(this).siblings(".goods-number").val());
                                    if (presentNumber >= 99) {
                                        alert("最多限购99件，如果要批量购取，请联系客服");
                                        $(this).siblings(".goods-number").val("99");
                                    } else {
                                        presentNumber++;
                                        $(this).siblings(".goods-number").val(presentNumber);
                                    }
                                    subtotal($(this));
                                    //增减数量时，同步数据库
                                    let goodsId = $(this).parents('.pars').attr("data-id");
                                    $.ajax({
                                        type: "GET",
                                        url: "../php/update_shopping_car.php",
                                        data: `status=update&userName=${userName}&goodsId=${goodsId}&number=${presentNumber}`,
                                        success: function (msg) {
                                        }
                                    });
                                })
                                //商品数量只能为数字
                                $(".number-detail").find(".goods-number").change(function () {
                                    let number = $(this).val();
                                    let reg = /^[1-9][0-9]*$/;
                                    if (!reg.test(number)) {
                                        alert("请输入正确的数量");
                                        $(this).val("1");
                                    }
                                    else if (parseInt(number) >= 99) {
                                        alert("最多限购99件，如果要批量购取，请联系客服");
                                        $(this).val("99");
                                    }
                                    let num = parseInt($(this).val());
                                    let price = parseInt($(this).parents(".number-detail").siblings(".unit-price-detail").find("span").text());
                                    $(this).parents(".number-detail").siblings(".subtotal-detail").find("span").text(num * price);
                                    settlement();
                                    //增减数量时，同步数据库
                                    let goodsId = $(this).parents('.pars').attr("data-id");
                                    $.ajax({
                                        type: "GET",
                                        url: "../php/update_shopping_car.php",
                                        data: `status=update&userName=${userName}&goodsId=${goodsId}&number=${num}`,
                                        success: function (msg) {
                                        }
                                    });
                                });
                                //小计金额变化
                                function subtotal(ele) {
                                    let number = parseInt(ele.siblings(".goods-number").val());
                                    let price = parseInt(ele.parents(".number-detail").siblings(".unit-price-detail").find("span").text());
                                    ele.parents(".number-detail").siblings(".subtotal-detail").find("span").text(number * price);
                                    settlement();
                                }
                                //合计金额变化
                                settlement();
                                function settlement() {
                                    let amount = 0;
                                    for (let i = 0; i < $(".change-detail:checked").length; i++) {
                                        amount += parseInt($(".change-detail:checked:eq(" + i + ")").parents("li").siblings(".subtotal-detail").find("span").text());
                                    }
                                    $(".settlement").find(".btn .hint span").text(amount);
                                }
                                changedGoods();
                            }
                        }, 1500);

                    }
                });
            }
        }
    });

    $(".main-btn").click(function () {
        window.location = "./main.html";
    });
</script>

</html>